<template>
  <div>
    <div style="float: left;"><p class="title"><i class="el-icon-tickets"></i>班级信息</p>
    </div>
    <div style="float: right;margin-bottom: 5px">
      <el-button type="primary" @click="createClass">创建班级</el-button>
      <el-button type="primary" plain @click="exportData">导出表格</el-button>
    </div>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column
        type="index">
      </el-table-column>
      <el-table-column
        sortable
        prop="id"
        label="班级编号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="college"
        label="所属学院"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="班级名称"
        align="center">
      </el-table-column>
      <el-table-column
        label="班级成员"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="getUserList(scope.row)">查看班级成员</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="资源库"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="getStoreHouseList(scope.row)">查看班级资源库</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="dialogFormVisible = true">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteRow(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    对话框-->
    <el-dialog title="修改班级信息" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="tableData">
        <el-form-item label="班级名称" :label-width="formLabelWidth">
          <el-input v-model="tableData.ClassName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false;modifySubmit">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {export2Excel} from "../../utils/excel"

export default {
  name: "ClassInfo",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      tableData: [],
      form: {},
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    createClass() {
      let _this = this
      this.$prompt("请输入新班级名", "创建班级", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({value}) => {
        let team = {name: value}
        this.$http.team.save(team).then(function (resp) {
          if (resp.code === 2000) {
            _this.$notify({
              title: "创建成功",
              type: "success"
            })
            _this.getTableData()
          }
        })
      })
    },
    getUserList(row) {
      this.$router.push({
        path: "/StudentInfo",
        query: {
          teamId: row.id,
        }
      })
    },
    getStoreHouseList(row) {
      this.$router.push({
        path: "/storeHouseMessage",
        query: {
          teamId: row.id,
        }
      })
    },
    getTableData() {
      let _this = this
      this.$http.team.findAll().then(result => {
        _this.tableData = result.data
      })
    },
    exportData() {
      export2Excel(this.columns, this.tableData)
    },
    modifySubmit(modifyForm) {
      const _this = this
      this.$refs[modifyForm].validate((valid) => {
        if (valid) {
          this.$confirm("此操作将永久修改信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            await this.$http.userMessage.update(this.modifyForm).then(function (res) {
              if (res.code == 2000) {
                _this.modifySync = false
                _this.$message({
                  type: "success",
                  message: "修改成功!"
                })
              } else {
                _this.$message({
                  type: "error",
                  message: res.msg
                })
              }
            })
            await this.getUserList()
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改"
            })
          })
        } else {
          alert("error submit!")
          return false
        }
      })
    },
    deleteRow(index, rows) {
      let _this = this
      this.$http.team.deleteTeam(this.tableData[index].id).then(result => {
        if (result.code == 2000) {
          _this.$message({
            type: "success",
            message: "删除成功"
          })
          _this.getTableData()
        }
      })
    }
  }
}


</script>

<style scoped>


</style>
